<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>10.2</title>
</head>

<body class="page12">
    <div id="myDiv">Right click or Ctrl+click me to get a custom context menu.
        Click anywhere else to get the default context menu.</div>
    <ul id="myMenu" style="position:absolute;visibility:hidden;background-color:
                silver">
        <li><a href="http://www.nczonline.net">Nicholas’ site</a></li>
        <li><a href="http://www.wrox.com">Wrox site</a></li>
        <li><a href="http://www.yahoo.com">Yahoo!</a></li>
    </ul>
    <div id="view" style="background: rgb(9, 255, 0)">
        <h1>
            view
        </h1>
    </div>
    <div></div>
    <div></div>
    <div></div>
    <div class="wrapper">

        <button id="myBtn">botton</button>
    </div>
    <!-- 输出 "Click Me" -->
    <input type="button" value="Click Me" onclick="alert(this.value)">
    <form method="post">
        <input type="text" name="username" value="">
        <input type="button" value="Echo Username" onclick="alert(username.value)">
    </form>
    <script>
        var EventUtil = {
            addHandler: function(element, type, handler) {
                if (element.addEventListener) {
                    element.addEventListener(type, handler, false);
                } else if (element.attachEvent) {
                    element.attachEvent("on" + type, handler);
                } else {
                    element["on" + type] = handler;
                }
            },
            removeHandler: function(element, type, handler) {
                if (element.removeEventListener) {
                    element.removeEventListener(type, handler, false);
                } else if (element.detachEvent) {
                    element.detachEvent("on" + type, handler);
                } else {
                    element["on" + type] = null;
                }
            },
            getEvent: function(event) {
                return event ? event : window.event;
            },
            getTarget: function(event) {
                return event.target || event.srcElement;
            },
            preventDefault: function(event) {
                if (event.preventDefault) {
                    event.preventDefault();
                } else {
                    event.returnValue = false;
                }
            },
            stopPropagation: function(event) {
                if (event.stopPropagation) {
                    event.stopPropagation();
                } else {
                    event.cancelBubble = true;
                }
            }
        };

        EventUtil.addHandler(window, "load", function() {
            var image = document.createElement("img");
            EventUtil.addHandler(image, "load", function(event) {
                event = EventUtil.getEvent(event);
                // alert(EventUtil.getTarget(event).src);
            });
            image.src = "003.jpg";
            document.body.appendChild(image);
        });
        var div = document.getElementById("myDiv");
        EventUtil.addHandler(div, "click", function(event) {
            event = EventUtil.getEvent(event);
            var keys = new Array();
            if (event.shiftKey) {
                keys.push("shift");
            }
            if (event.ctrlKey) {
                keys.push("ctrl");
            }
            if (event.altKey) {
                keys.push("alt");
            }
            if (event.metaKey) {
                keys.push("meta");
            }
            alert("Keys: " + keys.join(","));
        });

        EventUtil.addHandler(window, "load", function(event) {
            var div = document.getElementById("myDiv");
            EventUtil.addHandler(div, "contextmenu", function(event) {
                event = EventUtil.getEvent(event);
                EventUtil.preventDefault(event);
                var menu = document.getElementById("myMenu");
                menu.style.left = event.clientX + "px";
                menu.style.top = event.clientY + "px";
                menu.style.visibility = "visible";
            });
            EventUtil.addHandler(document, "click", function(event) {
                document.getElementById("myMenu").style.visibility = "hidden";
            });
        });

        EventUtil.addHandler(window, "load", function(event) {
            var div = document.getElementById("myDiv");
            div.innerHTML = "Current orientation is " + window.orientation;
            EventUtil.addHandler(window, "orientationchange", function(event) {
                div.innerHTML = "Current orientation is " + window.orientation;
            });
        });

        function chunk(array, process, context) {
            setTimeout(function() {
                var item = array.shift();
                process.call(context, item);
                if (array.length > 0) {
                    setTimeout(arguments.callee, 100);
                }
            }, 100);
        }
        var data = [12, 123, 1234, 453, 436, 23, 23, 5, 4123, 45, 346, 5634, 2234, 345, 342];

        function printValue(item) {
            var div = document.getElementById("myDiv");
            div.innerHTML = item + "<br>";
        }
        chunk(data, printValue);


        function Person(name, age, job) {
            if (this instanceof Person) {
                this.name = name;
                this.age = age;
                this.job = job;
            } else {
                return new Person(name, age, job);
            }
        }
        var person1 = Person("Nicholas", 29, "Software Engineer");
        alert(window.name); //""
        alert(person1.name); //"Nicholas"
        var person2 = new Person("Shelby", 34, "Ergonomist");
        alert(person2.name); //"Shelby"


        function Polygon(sides) {
            if (this instanceof Polygon) {
                this.sides = sides;
                this.getArea = function() {
                    return 0;
                };
            } else {
                return new Polygon(sides);
            }
        }

        function Rectangle(width, height) {
            Polygon.call(this, 2);
            this.width = width;
            this.height = height;
            this.getArea = function() {
                return this.width * this.height;
            };
        }
        Rectangle.prototype = new Polygon();
        var rect = new Rectangle(5, 10);
        alert(rect.sides); //2



        function createXHR() {
            if (typeof XMLHttpRequest != "undefined") {
                return new XMLHttpRequest();
            } else if (typeof ActiveXObject != "undefined") {
                if (typeof arguments.callee.activeXString != "string") {
                    var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",
                            "MSXML2.XMLHttp"
                        ],
                        i, len;
                    for (i = 0, len = versions.length; i < len; i++) {
                        try {
                            new ActiveXObject(versions[i]);
                            arguments.callee.activeXString = versions[i];
                            break;
                        } catch (ex) {
                            //跳过
                        }
                    }
                }
                return new ActiveXObject(arguments.callee.activeXString);
            } else {
                throw new Error("No XHR object available.");
            }
        }

        // 在这个惰性载入的createXHR()中，if 语句的每一个分支都会为createXHR变量赋值，有效覆盖了原有的函数。最后一步便是调用新赋的函数。下一次调用createXHR()的时候，就会直接调用被分配的函数，这样就不用再次执行if 语句了。
        function createXHR() {
            if (typeof XMLHttpRequest != "undefined") {
                createXHR = function() {
                    return new XMLHttpRequest();
                };
            } else if (typeof ActiveXObject != "undefined") {
                createXHR = function() {
                    if (typeof arguments.callee.activeXString != "string") {
                        var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",
                                "MSXML2.XMLHttp"
                            ],
                            i, len;
                        for (i = 0, len = versions.length; i < len; i++) {
                            try {
                                new ActiveXObject(versions[i]);
                                arguments.callee.activeXString = versions[i];
                                break;
                            } catch (ex) {
                                //skip
                            }
                        }
                    }
                    return new ActiveXObject(arguments.callee.activeXString);
                };
            } else {
                createXHR = function() {
                    throw new Error("No XHR object available.");
                };
            }
            return createXHR();
        }

        // 这个例子中使用的技巧是创建一个匿名、自执行的函数，用以确定应该使用哪一个函数实现。实际的逻辑都一样。不一样的地方就是第一行代码（使用var 定义函数）、新增了自执行的匿名函数，另外每个分支都返回正确的函数定义，以便立即将其赋值给createXHR()。
        var createXHR = (function() {
            if (typeof XMLHttpRequest != "undefined") {
                return function() {
                    return new XMLHttpRequest();
                };
            } else if (typeof ActiveXObject != "undefined") {
                return function() {
                    if (typeof arguments.callee.activeXString != "string") {
                        var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",
                                "MSXML2.XMLHttp"
                            ],
                            i, len;
                        for (i = 0, len = versions.length; i < len; i++) {
                            try {
                                new ActiveXObject(versions[i]);
                                arguments.callee.activeXString = versions[i];
                                break;
                            } catch (ex) {
                                //skip
                            }
                        }
                    }
                    return new ActiveXObject(arguments.callee.activeXString);
                };
            } else {
                return function() {
                    throw new Error("No XHR object available.");
                };
            }
        })();


        var name = "The Window";

        var object = {
            name: "My Object",

            getNameFunc: function() {
                return function() {
                    return this.name;
                };

            }

        };

        alert(object.getNameFunc()());
    </script>
</body>

</html>